<template>
  <div class="w-full">
    <div class="w-full bg-white shadow rounded-lg overflow-hidden w-full border border-periwinkle-gray">

      <div v-for="(sideBarItem, index) in sideBarNavList" :key="sideBarItem.title"
        class="border-b border-fog undefined">
        <div class="flex justify-end items-center gap-3 cursor-pointer p-3 hover:bg-gray-100"
          @click="() => onSelectHandle(sideBarItem)">
          <div class="flex-1 text-cape-cod cursor-pointer flex-1">
            <div>{{sideBarItem.title}}
              <div class="text-xs inline bg-gray-200 px-1 py-1 rounded-lg">{{sideBarItem.count}}</div>
            </div>
          </div>
          <svg class="w-4 h-4 text-periwinkle-gray mr-1 " :class="{'transform rotate-180': sideBarItem.isSelect}"
            width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Icons/Chevron down</title>
            <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
              stroke-linejoin="round">
              <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
                <polyline id="Path" points="14 5 8 11 2 5"></polyline>
              </g>
            </g>
          </svg>
        </div>
        <div class="relative p-3" v-if="sideBarItem.isSelect && sideBarItem.child?.length">
          <div class="flex flex-col gap-2 select-none">

            <div v-if="selectFilterSideNav(sideBarItem.child || [])">
              <div v-for="child in selectFilterSideNav(sideBarItem.child || [])" :key="child.title"
                @click="() => unSelectFilterHandle(sideBarItem.child, child)"
                class="text-base cursor-pointer flex justify-start items-center gap-2 p-2 whitespace-normal select-none">
                <div class="w-4.5 h-4.5 border rounded flex justify-center items-center bg-ink border-ink text-white">
                  <svg class="w-2.5 h-2.5" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <title>Icons/Tick2</title>
                    <g id="Icons/Tick2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <path
                        d="M15.4142482,5.41423067 C16.1952506,4.63316823 16.1952506,3.36684427 15.4142482,2.58578183 C14.6332457,1.80473939 13.3668418,1.80473939 12.5858393,2.58578183 L6.00001875,9.17162241 L3.41423067,6.58579433 C2.63316823,5.80475189 1.36684427,5.80475189 0.585781831,6.58579433 C-0.19526061,7.36685677 -0.19526061,8.63322073 0.585781831,9.41422317 L4.58579433,13.4142357 C5.36685677,14.1952381 6.63318073,14.1952381 7.41424317,13.4142357 L15.4142482,5.41423067 Z"
                        id="Shape" fill="currentColor"></path>
                    </g>
                  </svg>
                </div>
                <div class="text-cape-cod inline-flex whitespace-normal flex-row flex-wrap items-center">{{child.title}}
                </div>
              </div>
            </div>

            <input type="text" class="block w-full border border-steel rounded p-2 text-cape-cod placeholder-steel"
              placeholder="Type to find filters" @input="(event: Node) => onFilterKey(event, index)" />
            <div>

              <div v-for="item in filterSideNav(sideBarItem.child || [])" :key="item.title"
                @click="() => selectFilterHandle(sideBarItem.child, item)" class="text-base cursor-pointer flex justify-start items-center gap-2 
      p-2 whitespace-normal select-none">
                <div class="w-4.5 h-4.5 border rounded flex justify-center items-center border-steel bg-transparent">
                </div>
                <div class="text-cape-cod inline-flex whitespace-normal flex-row flex-wrap items-center">
                  {{item.title}}<span class="pl-1 text-sm text-gray-400">({{item.count}})</span></div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { SideNav, useSideNav } from './useSideNav';
import { useStore } from 'vuex';
import { computed } from '@vue/reactivity';
import { SET_SEARCH_LIST } from '@/store';
import trim from 'lodash/trim'
export default defineComponent({
  setup() {
    const { sideNavList } = useSideNav();
    const sideBarNavList = ref(sideNavList)
    const store = useStore();
    const selectList = computed(() => store.state.searchList);



    const onSelectHandle = (item: SideNav) => {
      sideBarNavList.value = sideBarNavList.value.map(obj => {
        if (obj.title === item.title) {
          return { ...obj, isSelect: !item.isSelect }
        }
        return { ...obj }
      })
    }

    const filterSideNav = (items: SideNav["child"] = []) => {
      return items.filter((obj: SideNav) => !obj.isSelect)
    }

    const selectFilterSideNav = (items: SideNav["child"] = []) => {
      return items.filter((obj: SideNav) => {
        const data = selectList.value.find((item: { title: string; }) => item.title === obj.title)
        obj.isSelect = data ? data.isSelect : false
        return obj.isSelect
      })
    }

    const selectFilterHandle = (items: SideNav["child"], item: SideNav) => {
      const data = items?.filter((obj: SideNav) => {
        if (obj.title === item.title) {
          obj.isSelect = true
        }
        return obj.isSelect
      })
      store.commit(SET_SEARCH_LIST, data)
    }
    const unSelectFilterHandle = (items: SideNav["child"], item: SideNav) => {
      const data = items?.filter((obj: SideNav) => {
        if (obj.title === item.title) {
          obj.isSelect = false
        }
        return obj.isSelect
      })
      store.commit(SET_SEARCH_LIST, data)
    }

    // 搜索
    const onFilterKey = (event: Node, childIndex: number) => {
      // @ts-ignore
      const value = trim(event.target.value as any) || ''
      if (!value) {
        sideBarNavList.value[childIndex].child = sideNavList[childIndex].child
        return
      }
      // 根据输入的字符过滤title的数据
      sideBarNavList.value[childIndex].child = sideBarNavList.value[childIndex]?.child?.filter((obj: SideNav) => {
        return obj.title.toUpperCase().includes(value.toUpperCase())
      })
    }

    return { sideBarNavList, selectList, onSelectHandle, filterSideNav, selectFilterSideNav, selectFilterHandle, unSelectFilterHandle, onFilterKey }
  }
})
</script> 
